<template>
  <div class="dialogue">
    <!-- dialogue  会话   会话框-->
    <el-dialog title="添加文章" :visible.sync="dialogVisible" width="60%">
      <el-form ref="DialogueForm" :model="DialogueForm" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="DialogueForm.title"></el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <el-input v-model="DialogueForm.img"></el-input>
        </el-form-item>
      </el-form>
      <WangEditor />
      <div class="dialog-footer">
        <span slot="footer">
          <el-button type="primary" @click="bannerSubmit">提交</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WangEditor from "../../wangEditor";
import api from "../../../api";

export default {
  name: "Dialogue",
  data() {
    return {
      dialogVisible: false,
      DialogueForm: {
        title: "",
        img: "",
      },
      type: "",
      row: {},
    };
  },
  mounted() {
    //添加按钮
    this.$bus.$on("bannerAdmin", (value) => {
      this.dialogVisible = value;
      this.type = "add";
      //清空历史记录
      this.DialogueForm = {
        title: "",
        img: "",
      };
    });
    this.$bus.$on("bannerTable", (row) => {
      if (row) {
        this.dialogVisible = true;
        this.DialogueForm.title = row.title;
        this.DialogueForm.img = row.burl;
        this.type = "update";
        this.row = row;
      }
    });
  },

  components: {
    WangEditor,
  },
  methods: {
    bannerSubmit() {
      // console.log(this.type);
      let title = this.DialogueForm.title;
      let burl = this.DialogueForm.img;
      let content = "";
      let id = this.row.id;
      if (this.type == "add") {
        api.bannerAdd({ title, burl, content }).then((res) => {
          if (res.status == 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "添加失败",
              type: "error",
            });
          }
        });
      } else if (this.type == "update") {
        api.bannerUpdate({ id, title, burl, content }).then((res) => {
          if (res.status == 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "修改失败",
              type: "error",
            });
          }
        });
      }
      //让table重新渲染
      this.$bus.$emit("bannerHttp", true);

      //关闭
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang='less'>
.dialogue {
  text-align: center;

  .dialog-footer {
    width: 100%;
    text-align: center;
  }
}
</style>